<template>
    <div>
        <h1>报表</h1>

        <div>
<el-row>
    <el-col :push="2" :span="2">
        <label>起始时间:</label>
        <el-date-picker v-model="getReportForm.startTime" type="date" placeholder="选择日期" />
    </el-col>

    <el-col :push="6" :span="2">
        <label>结束时间:</label>
            <el-date-picker v-model="getReportForm.endTime" type="date" placeholder="选择日期" />
    </el-col>
    <el-col :push="10" :span="4">
        <label>类型:</label>
            <el-select v-model="getReportForm.type" placeholder="请选择类型">
                <el-option label="日报" :value="1"></el-option>
                <el-option label="月报" :value="2"></el-option>
                <el-option label="年报" :value="3"></el-option>
                <el-option label="季度报" :value="4"></el-option>
            </el-select>
    </el-col>
</el-row>


           
            
         
            <el-button @click="getReport" style="margin-top: 10px;">获取报表</el-button>
        </div>

        <div>
            <h3>报表结果</h3>
            <el-table :data="reportData" style="width: 100%">
                <el-table-column prop="reportId" label="报告ID" />
                <el-table-column prop="reportType" label="报告类型" />
                <el-table-column prop="reportTime" label="报告时间" />
                <el-table-column prop="salesQuantity" label="销售数量" />
                <el-table-column prop="salesAmount" label="销售金额" />
                <el-table-column prop="preProductAmount" label="产品前期金额" />
                <el-table-column prop="growthRateProduct" label="产品增长率" />
                <el-table-column prop="declineRateProduct" label="产品下降率" />
                <el-table-column prop="salesCategory" label="销售类别" />
                <el-table-column prop="createdAt" label="创建时间" />
                <el-table-column prop="updatedAt" label="更新时间" />
                <el-table-column prop="salesProduct" label="销售产品" />
                <el-table-column prop="salesOrders" label="销售订单" />
                <el-table-column prop="salesService" label="销售服务" />
                <el-table-column prop="salesServiceAmount" label="服务金额" />
                <el-table-column prop="preServiceAmount" label="服务前期金额" />
                <el-table-column prop="growthRateService" label="服务增长率" />
                <el-table-column prop="declineRateService" label="服务下降率" />
                <el-table-column prop="maxShopId" label="最大店铺ID" />
                <el-table-column prop="maxSales" label="最大销售额" />
            </el-table>
        </div>

        <div>
            <h3>产品销售金额统计图</h3>
            <div ref="productSalesChart" style="width: 100%; height: 400px;"></div>
        </div>

        <div>
            <h3>产品销售数量对比图</h3>
            <div ref="productQuantityChart" style="width: 100%; height: 400px;"></div>
        </div>

        <div>
            <h3>产品增长率对比图</h3>
            <div ref="productGrowthChart" style="width: 100%; height: 400px;"></div>
        </div>

        <div>
            <h3>服务销售金额统计图</h3>
            <div ref="serviceSalesChart" style="width: 100%; height: 400px;"></div>
        </div>

        <div>
            <h3>服务销售数量对比图</h3>
            <div ref="serviceQuantityChart" style="width: 100%; height: 400px;"></div>
        </div>

        <div>
            <h3>服务增长率对比图</h3>
            <div ref="serviceGrowthChart" style="width: 100%; height: 400px;"></div>
        </div>
    </div>
</template>

<script>
import dayjs from 'dayjs';
import * as echarts from 'echarts';

export default {
    data() {
        return {
            reportData: [],
            getReportForm: {
                startTime: '',
                endTime: '',
                type: ''
            },
        };
    },
    methods: {
        getReport() {
            let apiUrl = "";
            switch (this.getReportForm.type) {
                case 1:
                    apiUrl = "/order/salesReport/selectSalesReportList"; // 日报
                    break;
                case 2:
                    apiUrl = "/order/salesReport/selectMonthSalesReportList"; // 月报
                    break;
                case 3:
                    apiUrl = "/order/salesReport/selectYearSalesReportList"; // 年报
                    break;
                case 4:
                    apiUrl = "/order/salesReport/selectQuarterSalesReportList"; // 季度报
                    break;
                default:
                    this.$message.error("请选择有效的报告类型");
                    return;
            }

            const formattedStartTime = dayjs(this.getReportForm.startTime).toISOString();
            const formattedEndTime = dayjs(this.getReportForm.endTime).toISOString();

            const params = {
                ...this.getReportForm,
                startTime: formattedStartTime,
                endTime: formattedEndTime
            };

            this.$http.get(apiUrl, { params }).then(res => {
                this.reportData = res.data.data; // 确保这里是数组
                this.renderProductCharts(); // 渲染产品图表
                this.renderServiceCharts(); // 渲染服务图表
            }).catch(error => {
                console.error("请求失败:", error);
                this.$message.error("获取报表失败，请重试。");
            });
        },
        renderProductCharts() {
            const productSales = this.reportData.map(item => item.salesAmount);
            const productNames = this.reportData.map(item => item.salesProduct);
            const productQuantities = this.reportData.map(item => item.salesQuantity);
            const productGrowthRates = this.reportData.map(item => item.growthRateProduct);
            const reportTimes = this.reportData.map(item => dayjs(item.createdAt).format('YYYY-MM-DD')); // 使用 createdAt

            // 渲染产品销售金额统计图
            const productSalesChart = echarts.init(this.$refs.productSalesChart);
            const salesOption = {
                title: { text: '产品销售金额统计图' },
                tooltip: {
                    trigger: 'axis',
                    formatter: (params) => {
                        return `${params[0].name}<br/>金额: ${params[0].value}<br/>时间: ${params[0].dataIndex}`;
                    }
                },
                xAxis: { type: 'category', data: reportTimes, name: '时间' },
                yAxis: { type: 'value', name: '金额' },
                series: [{ name: '销售金额', type: 'bar', data: productSales }]
            };
            productSalesChart.setOption(salesOption);

            // 渲染产品销售数量对比图
            const productQuantityChart = echarts.init(this.$refs.productQuantityChart);
            const quantityOption = {
                title: { text: '产品销售数量对比图' },
                tooltip: {
                    trigger: 'axis',
                    formatter: (params) => {
                        return `${params[0].name}<br/>数量: ${params[0].value}<br/>时间: ${params[0].dataIndex}`;
                    }
                },
                xAxis: { type: 'category', data: reportTimes, name: '时间' },
                yAxis: { type: 'value', name: '数量' },
                series: [{ name: '销售数量', type: 'bar', data: productQuantities }]
            };
            productQuantityChart.setOption(quantityOption);

            // 渲染产品增长率对比图
            const productGrowthChart = echarts.init(this.$refs.productGrowthChart);
            const growthOption = {
                title: { text: '产品增长率对比图' },
                tooltip: {
                    trigger: 'axis',
                    formatter: (params) => {
                        return `${params[0].name}<br/>增长率: ${params[0].value}%<br/>时间: ${params[0].dataIndex}`;
                    }
                },
                xAxis: { type: 'category', data: reportTimes, name: '时间' },
                yAxis: { type: 'value', name: '增长率 (%)' },
                series: [{ name: '增长率', type: 'line', data: productGrowthRates }]
            };
            productGrowthChart.setOption(growthOption);
        },
        renderServiceCharts() {
            const serviceSales = this.reportData.map(item => item.salesServiceAmount);
            const serviceNames = this.reportData.map(item => item.salesService);
            const serviceQuantities = this.reportData.map(item => item.salesService); // 假设服务数量和服务名称相同
            const serviceGrowthRates = this.reportData.map(item => item.growthRateService);
            const reportTimes = this.reportData.map(item => dayjs(item.createdAt).format('YYYY-MM-DD')); // 使用 createdAt

            // 渲染服务销售金额统计图
            const serviceSalesChart = echarts.init(this.$refs.serviceSalesChart);
            const salesOption = {
                title: { text: '服务销售金额统计图' },
                tooltip: {
                    trigger: 'axis',
                    formatter: (params) => {
                        return `${params[0].name}<br/>金额: ${params[0].value}<br/>时间: ${params[0].dataIndex}`;
                    }
                },
                xAxis: { type: 'category', data: reportTimes, name: '时间' },
                yAxis: { type: 'value', name: '金额' },
                series: [{ name: '销售金额', type: 'bar', data: serviceSales }]
            };
            serviceSalesChart.setOption(salesOption);

            // 渲染服务销售数量对比图
            const serviceQuantityChart = echarts.init(this.$refs.serviceQuantityChart);
            const quantityOption = {
                title: { text: '服务销售数量对比图' },
                tooltip: {
                    trigger: 'axis',
                    formatter: (params) => {
                        return `${params[0].name}<br/>数量: ${params[0].value}<br/>时间: ${params[0].dataIndex}`;
                    }
                },
                xAxis: { type: 'category', data: reportTimes, name: '时间' },
                yAxis: { type: 'value', name: '数量' },
                series: [{ name: '销售数量', type: 'bar', data: serviceQuantities }]
            };
            serviceQuantityChart.setOption(quantityOption);

            // 渲染服务增长率对比图
            const serviceGrowthChart = echarts.init(this.$refs.serviceGrowthChart);
            const growthOption = {
                title: { text: '服务增长率对比图' },
                tooltip: {
                    trigger: 'axis',
                    formatter: (params) => {
                        return `${params[0].name}<br/>增长率: ${params[0].value}%<br/>时间: ${params[0].dataIndex}`;
                    }
                },
                xAxis: { type: 'category', data: reportTimes, name: '时间' },
                yAxis: { type: 'value', name: '增长率 (%)' },
                series: [{ name: '增长率', type: 'line', data: serviceGrowthRates }]
            };
            serviceGrowthChart.setOption(growthOption);
        },
    },
    mounted() {
        // 在组件挂载后初始化图表
        this.renderProductCharts();
        this.renderServiceCharts();
    },
}
</script>

<style scoped>
/* 主标题样式 */
h1 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 24px;
    color: #333;
}

/* 子标题样式 */
h3 {
    margin-top: 20px;
    color: #555;
}

/* 行和列的间距 */
.el-row {
    margin-bottom: 20px;
}

/* 输入框和选择框样式 */
.el-date-picker,
.el-select {
    width: 100%;
    margin-top: 5px;
}

/* 按钮样式 */
.el-button {
    margin-top: 10px;
    background-color: #409eff; /* 按钮背景颜色 */
    color: white; /* 按钮文本颜色 */
    border: none;
    border-radius: 4px;
    padding: 10px 15px;
    transition: background-color 0.3s;
}

.el-button:hover {
    background-color: #66b1ff; /* 悬停时的背景颜色 */
}

/* 表格样式 */
.el-table {
    margin-top: 20px;
    border-radius: 4px;
    overflow: hidden; /* 为表格添加圆角 */
}

.el-table th {
    background-color: #f5f7fa; /* 表头背景色 */
    color: #606266; /* 表头文字颜色 */
}

/* 图表容器样式 */
div[ref^="Chart"] {
    margin-top: 20px;
    border: 1px solid #dcdfe6; /* 图表边框 */
    border-radius: 4px;
    padding: 10px;
    background-color: #fff; /* 图表背景 */
}

/* 响应式样式 */
@media (max-width: 768px) {
    .el-row {
        flex-direction: column; /* 小屏幕上垂直排列 */
    }

    .el-col {
        margin-bottom: 10px; /* 元素间距 */
    }

    .el-button {
        width: 100%; /* 按钮全宽 */
    }
}
</style>